import "package:flutter/material.dart";
import "package:myapp/_views/dynamic/type.dart";

import "UPIdentifyWidget.dart";

class LiveSubscribeItem {
  String avatar; //头像
  String name; //用户名
  DynamicUPInfoAuthentication? dynamicUPInfoAuthentication; //用户身份
  String coverUrl; //封面
  String viewCount; //观看量
  String liveTitle; //直播标题
  LiveSubscribeItem({
    required this.avatar,
    required this.name,
    this.dynamicUPInfoAuthentication,
    required this.coverUrl,
    required this.viewCount,
    required this.liveTitle,
  });
}

class LiveSubscribeWidget extends StatelessWidget {
  final List<LiveSubscribeItem> liveSubscribeList = [
    LiveSubscribeItem(
      avatar: './images/tab_1.jpg',
      name: 'void新神殿下',
      dynamicUPInfoAuthentication: DynamicUPInfoAuthentication(
        type: 'UP',
        name: 'bilibili 知名UP主',
      ),
      coverUrl: "./images/1.jpg",
      viewCount: "3870",
      liveTitle: '学3d',
    ),
    LiveSubscribeItem(
      avatar: './images/tab_2.jpg',
      name: "RlBeeee",
      coverUrl: "./images/1.jpg",
      viewCount: "3870",
      liveTitle: '学3d',
    ),
    LiveSubscribeItem(
      avatar: './images/tab_3.jpg',
      name: "犬牙冢",
      coverUrl: "./images/1.jpg",
      viewCount: "3870",
      liveTitle: '学3d',
    ),
    LiveSubscribeItem(
      avatar: './images/tab_4.jpg',
      name: "千夜QYS3",
      coverUrl: "./images/1.jpg",
      viewCount: "3870",
      liveTitle: '学3d',
    ),
    LiveSubscribeItem(
      avatar: "./images/tab_5.jpg",
      name: '哔哩哔哩漫画',
      dynamicUPInfoAuthentication: DynamicUPInfoAuthentication(
        type: 'institution',
        name: 'bilibili漫画 官方账号',
      ),
      coverUrl: "./images/1.jpg",
      viewCount: "3870",
      liveTitle: '学3d',
    ),
    LiveSubscribeItem(
      avatar: "./images/tab_1.jpg",
      name: '哔哩哔哩会员购',
      dynamicUPInfoAuthentication: DynamicUPInfoAuthentication(
        type: 'institution',
        name: 'bilibili会员购 官方账号',
      ),
      coverUrl: "./images/1.jpg",
      viewCount: "3870",
      liveTitle: '学3d',
    ),
  ];

  LiveSubscribeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: Container(
        margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
        padding: const EdgeInsets.only(top: 10, bottom: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 8, right: 4),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(right: 3),
                          child: Text(
                            '我的关注',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        Text(
                          '${liveSubscribeList.length}',
                          style: const TextStyle(
                            color: Colors.pink,
                          ),
                        ),
                        const Text(
                          '人正在直播',
                          style: TextStyle(
                            color: Colors.black45,
                          ),
                        ),
                        const Icon(
                          Icons.bar_chart,
                          color: Colors.black45,
                          size: 16,
                        ),
                      ],
                    ),
                  ),
                  const Row(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(right: 5),
                        child: CircleAvatar(
                          radius: 8,
                          backgroundImage: AssetImage("./images/tab_1.jpg"),
                        ),
                      ),
                      Text(
                        '全部',
                        style: TextStyle(
                          color: Colors.black45,
                        ),
                      ),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.black45,
                        size: 18,
                      ),
                    ],
                  )
                ],
              ),
            ),
            liveSubscribeList.length > 1
                ? Container(
                    margin: const EdgeInsets.only(top: 14),
                    height: 77,
                    child: ListView.builder(
                      physics: const PageScrollPhysics(),
                      scrollDirection: Axis.horizontal,
                      itemCount: liveSubscribeList.length,
                      itemBuilder: (context, index) {
                        LiveSubscribeItem item = liveSubscribeList[index];
                        DynamicUPInfoAuthentication?
                            dynamicUPInfoAuthentication =
                            item.dynamicUPInfoAuthentication;
                        return SizedBox(
                          width: 54,
                          child: Column(
                            children: [
                              Stack(
                                children: [
                                  Container(
                                    padding: const EdgeInsets.all(1),
                                    decoration: BoxDecoration(
                                        border: Border.all(
                                          width: 1,
                                          color: Colors.pink,
                                        ),
                                        borderRadius:
                                            BorderRadius.circular(30)),
                                    child: CircleAvatar(
                                      radius: 18,
                                      backgroundImage: AssetImage(item.avatar),
                                    ),
                                  ),
                                  dynamicUPInfoAuthentication != null
                                      ? Positioned(
                                          right: 0,
                                          bottom: 0,
                                          child: UPIdentifyWidget(
                                            dynamicUPInfoAuthentication:
                                                dynamicUPInfoAuthentication,
                                          ))
                                      : const SizedBox.shrink(),
                                ],
                              ),
                              Padding(
                                padding: const EdgeInsets.only(top: 5),
                                child: Text(
                                  item.name,
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(
                                    fontSize: 11,
                                    height: 1.2,
                                    color: Color.fromARGB(255, 53, 53, 53),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  )
                : Padding(
                    padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4),
                      child: SizedBox(
                        height: 80,
                        width: double.infinity,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            AspectRatio(
                              aspectRatio: 3 / 2,
                              child: Stack(
                                alignment: Alignment.bottomCenter,
                                children: [
                                  Image.asset(
                                    liveSubscribeList[0].coverUrl,
                                    width: double.infinity,
                                    height: double.infinity,
                                    fit: BoxFit.cover,
                                  ),
                                  Container(
                                    height: 24,
                                    width: double.infinity,
                                    padding: const EdgeInsets.only(left: 4),
                                    decoration: const BoxDecoration(
                                      gradient: LinearGradient(
                                        begin: Alignment.bottomCenter,
                                        end: Alignment.topCenter,
                                        colors: [
                                          Color.fromARGB(120, 0, 0, 0),
                                          Color.fromARGB(80, 0, 0, 0),
                                          Color.fromARGB(40, 0, 0, 0),
                                          Color.fromARGB(0, 0, 0, 0),
                                        ],
                                      ),
                                    ),
                                    child: Row(
                                      children: [
                                        const Icon(
                                          Icons.remove_red_eye_outlined,
                                          color: Colors.white,
                                          size: 16,
                                        ),
                                        Text(
                                          liveSubscribeList[0].viewCount,
                                          style: const TextStyle(
                                            color: Colors.white,
                                            fontSize: 11,
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: Container(
                                padding:
                                    const EdgeInsets.only(left: 16, right: 5),
                                decoration: const BoxDecoration(
                                  border: Border(
                                    top: BorderSide(
                                      color: Colors.black12,
                                      width: 1,
                                    ),
                                    right: BorderSide(
                                      color: Colors.black12,
                                      width: 1,
                                    ),
                                    bottom: BorderSide(
                                      color: Colors.black12,
                                      width: 1,
                                    ),
                                  ),
                                ),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Stack(
                                      children: [
                                        CircleAvatar(
                                          backgroundImage: AssetImage(
                                              liveSubscribeList[0].avatar),
                                          radius: 20,
                                        ),
                                        liveSubscribeList[0]
                                                    .dynamicUPInfoAuthentication !=
                                                null
                                            ? Positioned(
                                                right: 0,
                                                bottom: 0,
                                                child: UPIdentifyWidget(
                                                  dynamicUPInfoAuthentication:
                                                      liveSubscribeList[0]
                                                          .dynamicUPInfoAuthentication,
                                                ))
                                            : const SizedBox.shrink(),
                                      ],
                                    ),
                                    Expanded(
                                      flex: 1,
                                      child: Padding(
                                        padding: const EdgeInsets.only(left: 8),
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              liveSubscribeList[0].name,
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                            ),
                                            Text(
                                              liveSubscribeList[0].liveTitle,
                                              maxLines: 1,
                                              overflow: TextOverflow.ellipsis,
                                              style: const TextStyle(
                                                color: Colors.black54,
                                                fontSize: 12,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  )
          ],
        ),
      ),
    );
  }
}
